<template>
    <div>
        <div class="specialcolumn_top">
            <p @click="ret">＜</p>
            <p>严选专栏</p>
            <p></p>
        </div>
        <div class="specialcolumn_div">
            <ul>
                <li v-for="(item, index) in list" :key="index">
                    <img :src="item.pic" alt="" />
                    <div>
                        <p>{{item.title}}</p>
                        <p
                        style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:350px;"
                        >{{item.descript}}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { special } from "../../utils/api";

export default {
    data() {
        return {
            list: [],
        };
    },
    mounted() {
        special().then((res) => {
            console.log(res);
            this.list = res;
        });
    },
    methods: {
        ret() {
            this.$router.go(-1);
        },
    },
};
</script>
<style lang="scss" scoped>
.specialcolumn_top {
    width: 100%;
    height: 1rem;
    // background: palegreen;
    border: 0.01rem gray solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
        font-size: 0.5rem;
    }
}
.specialcolumn_div{
    width: 100%;
    ul{
        width: 100%;
        li{
            position: relative;
            width: 100%;
            img{
                width: 100%;
                height: 3.5rem;
            }
            div{
                color: #fff;
                font-size: 0.4rem;
                position: absolute;
                top: 10%;
                left: 10%;
                text-align: center;
            }
        }
    }
}
</style>
